<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>首页 - 小憨堡</title>
        <script src="../static/js/jquery-3.2.1.js"></script>
        <link rel="stylesheet" href="../static/bootstrap-3.3.7-dist/css/bootstrap.css" />
        <link rel="stylesheet" href="../static/css/style.css" />
        <script>
            $(document).ready(function () {
                $.get(
                    "/currentUser",
                    function (data, status) {
                        if (data.code == 0) {
                            $("#top-nav").append("<li><a href=\"pay\">立刻结账</a></li>\n" +
                                "                    <li><a href=\"address.html\">地址管理</a></li>\n" +
                                "                    <li><a href=\"account.html\">账号管理</a></li>\n" +
                                "                    <li><a href=\"logout\" style='font-size: 12px;'>你好：" + data.data + " (退出登录)</a></li>");
                        } else {
                            $("#top-nav").append("<li><a href=\"login.html\">登录</a></li>");
                        }
                    }
                );
                $.get(
                    "http://localhost:8080/category/list?categoryIdOrName=&pageIndex=0&pageSize=99",
                    function (data, status) {
                        if (data.code == 0) {
                            for (var i=0;i<data.data.length-1;i++) {
                                $("#leftside-nav").append("<li><a href='#category-" +  + data.data[i].type + "'>" + data.data[i].name + "</a></li>");
                                $(".container").append(
                                    "<div style='float: left; width: 100%;'>" +
                                        "<div class='login-header' style='float: left'>" + data.data[i].name + "</div>" +
                                        "<div id='category-" + data.data[i].type + "' style='float: left; width: 100%;'>" +
                                        "</div>" +
                                    "</div>"
                                );
                                $.ajax({
                                    async: false,
                                    url: "/product/listByCategoryType?categoryType=" + data.data[i].type,
                                    success: function (data1, status) {
                                        if (data1.code == 0) {
                                            for (var j=0;j<data1.data.length;j++) {
                                                $("#category-" + data.data[i].type).append(
                                                    "<div class='col-md-4 product-cell' id='product-" + data1.data[j].productId + "'>" +
                                                        "<img src='" + data1.data[j].productIcon + "' alt='" + data1.data[j].productName + "' />" +
                                                        "<div class='form-group'></div>" +
                                                        "<div>商品名称：" + data1.data[j].productName + "</div>" +
                                                        "<div>单价：" + data1.data[j].productPrice + "</div>" +
                                                        "<div>描述：" + data1.data[j].productDescription + "</div>" +
                                                        "<div>剩余库存：" + data1.data[j].productStock + "</div>" +
                                                        "<input type='hidden' value='" + data1.data[j].productId + "' />" +
                                                        "<div class='form-group'></div>" +
                                                        "<input type='number' style='display: none' value='1' min='1' onchange='updateCart(this)' />" +
                                                        "<div class='form-group'></div>" +
                                                        "<button class='btn btn-info form-control' style='display: block' onclick='addToCart(this)'>+ 添加至购物车</button>" +
                                                        "<button class='btn btn-danger form-control' style='display: none' onclick='removeFromCart(this)'>- 从购物车中移除</button>" +
                                                    "</div>"
                                                );
                                            }
                                        }
                                    }
                                });
                                $.get(
                                    "/cart/list",
                                    function (data, status) {
                                        if (data.code == 0) {
                                            for (var i=0;i<data.data.length;i++) {
                                                var productId = data.data[i].productId;
                                                $("#product-" + productId + " input[type='number']")[0].value = data.data[i].productQuantity;
                                                $("#product-" + productId + " input[type='number']").css("display", "block");
                                                $("#product-" + productId + " .btn-info").css("display", "none");
                                                $("#product-" + productId + " .btn-danger").css("display", "block");
                                            }
                                        }
                                    }
                                );
                            }
                        }
                    }
                );
            });
            function addToCart(e) {
                var productId = $(e).parent()[0].getElementsByTagName("input")[0].value;
                var inputNumber = $(e).parent()[0].getElementsByTagName("input")[1];
                var removeButton = $(e).parent()[0].getElementsByTagName("button")[1];
                $.get(
                    "/cart/add?productId=" + productId + "&productQuantity=" + inputNumber.value,
                    function (data, status) {
                        if (data.code == 0) {
                            $(e).css("display", "none");
                            $(inputNumber).css("display", "inline-block");
                            $(removeButton).css("display", "block");
                        } else {
                            alert("添加至购物车失败，请先确认是否是登录状态。");
                        }
                    }
                );
            }
            function removeFromCart(e) {
                var productId = $(e).parent()[0].getElementsByTagName("input")[0].value;
                var inputNumber = $(e).parent()[0].getElementsByTagName("input")[1];
                var addButton = $(e).parent()[0].getElementsByTagName("button")[0];
                $.get(
                    "/cart/deleteByProductId?productId=" + productId,
                    function (data, status) {
                        if (data.code == 0) {
                            $(e).css("display", "none");
                            inputNumber.value = 1;
                            $(inputNumber).css("display", "none");
                            $(addButton).css("display", "block");
                        } else {
                            alert("删除失败，请先确认是否是登录状态。");
                        }
                    }
                );

            }
            function updateCart(e) {
                var productId = $(e).parent()[0].getElementsByTagName("input")[0].value;
                $.get(
                    "/cart/update?productId=" + productId + "&productQuantity=" + e.value,
                    function (data, status) {
                        if (data.code == 1) {
                            alert("数据更新失败，请先确认是否是登录状态。");
                        }
                    }
                );
            }
        </script>
    </head>
    <body>
        <div class="login-bg">
        </div>
        <div class="topbar">
            <img src="../static/images/index-logo.png" />
            <ul id="top-nav">

            </ul>
        </div>
        <div class="left-sidebar">
            <ul id="leftside-nav">

            </ul>
        </div>
        <div class="container">

        </div>
        <div class="sidebar-footer">
            <p class="copyright">Copyright &copy; 2020. Group 6 All rights reserved.</p>
        </div>
    </body>
</html>